<template>
  <div class="container">
    <el-dialog title="题目预览" width="900px" :visible.sync="showQuestionDialog">
      <el-row :gutter="20">
        <el-col :span="6">
          【题型】：<span>{{ type }}</span>
        </el-col>
        <el-col :span="6">【编号】：<span>{{ questionDetails.id }}</span></el-col>
        <el-col :span="6">【难度】：<span>{{ difficulty }}</span></el-col>
        <el-col :span="6">【标签】：<span>{{ questionDetails.tags||'无' }}</span></el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6">【学科】：<span>{{ questionDetails.subjectName }}</span></el-col>
        <el-col :span="6">【目录】：<span>{{ questionDetails.directoryName }}</span></el-col>
        <el-col :span="6">【方向】：<span>{{ questionDetails.direction }}</span></el-col>
      </el-row>
      <hr>
      <el-row style="margin: 0 auto;">
        【题干】：
      </el-row>
      <el-row style="margin: 0 auto;">
        <div style="color: rgb(0, 0, 255);" v-html="questionDetails.question" />
      </el-row>
      <template v-if="questionDetails.questionType==='1'">
        <el-row>  单选题 选项：（以下选中的选项为正确答案）</el-row>
        <el-row v-for="(item,index) in questionDetails.options" :key="index">
          <el-radio :value="item.isRight" :label="1">{{ item.title }}</el-radio>
        </el-row>
      </template>
      <template v-else-if="questionDetails.questionType==='2'">
        <el-row>  多选题 选项：（以下选中的选项为正确答案）</el-row>
        <el-row v-for="(item,index) in questionDetails.options" :key="index">
          <el-checkbox :value="item.isRight" :true-label="1">{{ item.title }}</el-checkbox>
        </el-row>
      </template>

      <hr>
      <el-row style="margin: 0 auto;">
        【参考答案】：
        <el-button
          style="background-color: rgb(245, 108, 108); color: #fff;"
          @click="showVideoFn"
        >视频答案预览</el-button>
        <template>
          <div v-show="showVideo" class="video" style="height: 300px;">
            <video autoplay muted :src="questionDetails.videoURL" controls style="height: 100%;" />
          </div>
        </template>
      </el-row>
      <hr>
      <el-row style="margin: 20px 0;">
        【答案解析】：<div style="display: inline-block;" v-html="questionDetails.remarks" />
      </el-row>
      <hr>
      <el-row>
        【题目备注】：<div style="display: inline-block;" v-html="questionDetails.answer" />
      </el-row>
      <div slot="footer" class="dialog-footer" align="right">
        <el-button type="primary" @click="close">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    questionDetails: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      showQuestionDialog: false,
      showVideo: false // 视频显示
    }
  },
  computed: {
    type() {
      return this.questionDetails.questionType === '1' ? '单选' : this.questionDetails.questionType === '2' ? '多选' : this.questionDetails.questionType === '3' ? '简答' : null
    },
    difficulty() {
      return this.questionDetails.difficulty === '1' ? '简单' : this.questionDetails.difficulty === '2' ? '一般' : this.questionDetails.difficulty === '3' ? '困难' : null
    }
  },
  methods: {
    // 视频解析
    showVideoFn() {
      if (!this.questionDetails.videoURL) {
        this.$message.error('无视频解析')
      } else {
        this.showVideo = true
      }
    },
    // 关闭弹框
    close() {
      this.showQuestionDialog = false
      this.showVideo = false
    }

  }
}
</script>

<style scoped lang='scss'></style>
